<!doctype html>
<%@ page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
	<meta charset="UTF-8">
	<title>Grima Portal</title>
	<link rel="stylesheet" type="text/css" href="../css/themes/bootstrap/easyui.css">
	<link rel="stylesheet" type="text/css" href="../css/icon.css">
	<link rel="stylesheet" type="text/css" href="../css/portal.css">
	<link rel="stylesheet" type="text/css" href="../css/font-awesome.min.css">
	
	<script type="text/javascript" src="../js/jquery.min.js"></script>
	<script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
</head>
<body class="easyui-layout">
	
    <div data-options="region:'north',border:false" style="height:50px;padding:10px;overflow: hidden;">
		<jsp:include page="header.jsp" />
	</div>
    <div data-options="region:'east',split:true,collapsed:true,title:' '" style="width:250px;padding:10px;"></div>
	<div data-options="region:'south',border:false" style="height:30px;padding:10px;background:#F5F5F5;text-align:center;color:#707070">
		<jsp:include page="footer.jsp" />
	</div>
    <div data-options="region:'center',title:'Caixa de Entrada'">

	<table id="dg" class="easyui-datagrid" title=""
			data-options="rownumbers:true, singleSelect:true, toolbar:'#tb', fitColumns:true,onClickRow: onClickRow">
		<thead>
			<tr>
				<th data-options="field:'id',width:50">ID</th>
				<th data-options="field:'processInstanceId',width:60">Processo</th>
				<th data-options="field:'name',width:220">Nome</th>
				<th data-options="field:'priority',width:80,align:'left'">Prioridade</th>
				<th data-options="field:'owner',width:220,align:'left'">Solicitante</th>
				<th data-options="field:'createTime',width:100">Data Início</th>
				<th data-options="field:'dueDate',width:100">Prazo</th>
			</tr>
		</thead>
		<c:forEach items="${tasks}" var="task">
		<tr>
			<td>${task.id}</td>                    
			<td>${task.processInstanceId}</td>
			<td>${task.name}</td>
			<td>${task.priority}</td>
			<td>${task.owner}</td>
			<td><fmt:formatDate value="${task.createTime}" pattern="dd/MM/yyyy HH:mm" /></td>
			<td><fmt:formatDate value="${task.dueDate}" pattern="dd/MM/yyyy HH:mm" /></td>
		</tr>
		</c:forEach>
	</table>
	
	<div id="tb" style="padding:5px;height:auto">
		<div style="margin-bottom:5px">
			<a href="#" onclick="edit();" title="Editar"><i class="fa fa-edit" style="font-size:18px;color:green;padding:5px;"></i>Editar</a>
		</div>
		<br/>
		<div>
			Processo: 
			<select class="easyui-combobox" panelHeight="auto" style="width:200px">
				<option value=""></option>
				<option value="urgente">Catálogo</option>
				<option value="alta">Ordem de Compra</option>
				<option value="media">Aviso de Ferias</option>
				<option value="baixa">Contratacao de Funcionario</option>
			</select>

			Data Criação: <input class="easyui-datebox" style="width:80px">
			Até: <input class="easyui-datebox" style="width:80px">
			
			Prioridade: 
			<select class="easyui-combobox" panelHeight="auto" style="width:100px">
				<option value=""></option>
				<option value="urgente">Urgente</option>
				<option value="alta">Alta</option>
				<option value="media">Média</option>
				<option value="baixa">Baixa</option>
			</select>
			<a href="#" class="easyui-linkbutton" iconCls="icon-search">Pesquisar</a>
		</div>
	</div>
    </div>

	<input type="hidden" id="selectedItemId"/>
	
	<script>
		function search(){
		}
		function onClickRow(index){
			var row = $('#dg').datagrid('getSelected');
			if (row){
				$('#selectedItemId').val(row.id);
			}
		}
		function edit(){
			var id = $('#selectedItemId').val();
			if (id > 0){
				window.location.href = '<c:url value="/secure/taskEdit.html"/>?id='+id;
			}
		}

	</script>

</body>
</html>